
import React, { Component } from 'react'
import './cursor.css'

// 导入高阶组件
import withMouse from './hoc'
/**
 * RenderProps模式封装的步骤：
 * 1. 创建Mouse组件，在组件中提供复用的状态逻辑代码（1. 状态  2. 操作状态的方法） =》data（数据）
 * 2. 将要复用的状态作为 props.render(state) 方法的参数，暴露到组件外部 
 * 3. 使用 props.render() 的返回值作为要渲染的内容 
 */
class Mouse extends Component {
  // 定义响应数据
  state = {
    x: 0,
    y: 0,
  };

  componentDidMount () {
    // 注册鼠标移动事件=》获取鼠标移动后在页面的坐标点
    window.addEventListener("mousemove", this.handlerMove)
  }

  handlerMove = (e) => {
    // console.log(e);
    this.setState({
      x: e.x,
      y: e.y,
    })
  };

  componentWillUnmount () {
    // 解绑事件
    window.removeEventListener("mousemove", this.handlerMove)
  }
  render () {
    // 复用的数据=》传递给模版方法
    return this.props.render(this.state)
  }
}

// 调用测试
// 高阶组件
// 被增强的组件1
const Fnu = ({ x, y, a }) => {
  return (
    <div style={{ color: 'pink' }}>我是被增强的组件:{x}:{y},{a}</div>
  )
}
// 获取被增强的组件
const HocMouse1 = withMouse(Fnu)
class App extends Component {
  render () {
    return (
      <div>
        <h1>renderProps模式</h1>
        <Mouse render={(data) => {
          // console.log(data)
          // 决定UI长什么样
          return (
            <div>
              <h1 style={{ color: 'orange', fontSize: '64px' }}>鼠标移动位置：{data.x}:{data.y}</h1>
            </div>
          )
        }} />

        <Mouse render={(data) => {
          // console.log(data)
          // 决定UI长什么样
          return (
            <div>
              <h2 style={{ color: 'green' }}>鼠标移动位置：{data.x}:{data.y}</h2>
            </div>
          )
        }} />
        <hr />
        <HocMouse1 a={10} b='1' />
      </div>
    )
  }
}

export default App


